<!DOCTYPE html>
<html>

<head lang="en">
    <title>首页</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css" rel="stylesheet">
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        $(function () {
            // 获取3条最新产品推荐
            $.get('/insurances/commends', {state: 1, pageSize: 3}, function (data) {
                console.log(data);
                // alert(2);
                $("#insuranceCommends").renderValues(data, {
                    getHref: getHref
                });

                //为第一个item添加active属性（活动）
                $(".carousel-item:first").addClass("active");
            });

        });

    </script>
</head>
<body>

<!--隐藏域当前页，分页查询，默认为首页-->
<input type="hidden" name="currentPage" id="currentPage" value="1">

<div class="body">



    <!--全局搜索隐藏-->
    <div class="search-head">
        <div class="row nav-search">
            <div class="col-2">
                <!-- <a href="index.html">-->
                 <a href="javascript:history.go(-1);">
                    <span><i class="fa fa-chevron-left fa-2x"></i></span>
                </a>
            </div>
            <!--<div class="col-10">
                <div class="input-group-sm search">
                    <input class="form-control searchBtn" placeholder="搜索保险产品">
                </div>
            </div>-->
        </div>
    </div>



    <!--产品推荐-->
    <div class="container">
        <h6 class="module-title" style="color: #20c997">畅销产品推荐</h6>
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div id="insuranceCommends">
                <div class="carousel-inner" render-loop="list">
                    <div class="carousel-item ">
                        <a data-href="insuranceProduct.html?id=" render-key="list.id" render-fun="getHref">
                            <img class="d-block w-100" render-src="list.coverUrl" width="100%" height="200px">
                            <span class="recommend" render-html="list.productName" style="color: #218838"></span>
                        </a>
                        / <span render-html="list.i_name" style="font-size: small"></span>&nbsp;
                        <!--<b render-html="list.orderNum"></b>-->
                        <em>
                            <b style="font-size: smaller">
                                价格：¥ <u render-html="list.price">80</u>
                            </b>
                        </em>

                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
        </div>
        <hr>

    </div>
</div>

<!--全部保险产品-->
<div class="container" style="font-size: smaller">
    <h6 class="module-title" style="color: #20c997">综合保障</h6>

    <!--renderValues渲染页面-->


    <div class="row hot" id="allProducts">
        <div class="col" >
            <div class="row detail" render-loop="list" >
                <div class="col-4">
                    <a data-href="insuranceProduct.html?id=" render-key="list.id" render-fun="getHref">
                        <img render-src="list.coverUrl" width="100px" height="70px">
                        <div class="shadow_insure">
                            <i>
                                <b render-html="list.productName" style="color:purple"></b>
                            </i>
                        </div>

                        <div class="info" style="font-size:smaller">
                            <em>
                                <b>
                                    <u render-html="list.insurance.name"></u>&nbsp;&nbsp;&nbsp;
                                </b>
                            </em>
                            价格：
                            <em>
                                <b>
                                    ¥<u render-html="list.price">80</u>
                                </b>
                            </em>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<hr>

<script>

    $(function () {
        // 获取隐藏域input框中的当前页页码
        var currentInput = $("#currentPage");

        // 创建数组储存产品
        var productsArr = [];

        // 默认当前总页数为1（开始显示第一页，查询显示了+1<方便下滑拉动时查询第二页>）
        var pages = 1;

        // 创建查询产品的方法query
        function query() {

            // 获取当前页页码
            var currentPage = currentInput.val();

            // 查询当前页产品信息
            $.get('/insurances/list', {currentPage: currentPage , pageSize : 9}, function (data) {

                // 合并两个数组到第一个参数数组上
                $.merge(productsArr, data.list);

                // 创建json数组，用于渲染循环时取list属性
                var json = {list: productsArr};
                console.log(json);

                // 页面渲染数据
                $("#allProducts").renderValues(json, {
                    getHref: function (item, value) {
                        // $(item)是当前要渲染标签元素(a),value是render-key的值（list.id）
                        // 获取跳转地址
                        var href = $(item).data("href");

                        // 把产品id添加到拼接到标签a的跳转url上（href属性）
                        $(item).attr('href', href + value);
                    }
                });

                // 根据查询到的结果集重新设置总页数pages
                pages = data.pages;
            });

            // 当前页+1（input框value值+1）
            currentInput.val(parseInt(currentPage) + 1);
        }


        // 打开页面，默认查询首页信息
        query();

        // 页面滚动条变化时，执行scroll函数
        $(window).scroll(function () {
            // 下滑拉动引起页面滚动，当滚动条件满足以下条件，即查询下一页的产品信息
            if ($(document).scrollTop() + $(window).height() + 1 >= $(document).height()) {

                // 获取当前页页码
                var currentPage = currentInput.val();

                // 当前页码小于或等于总页数，就查询；不然弹框提示已加载完全
                if (currentPage <= pages) {
                    query();
                } else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '已经加载全!',
                        autoClose: 300,
                        position: 'bottom'  // center居中  bottom底部
                    });
                }
            }
        });

    });

</script>

</body>

</html>